<template>
  <div class="MyContainer">
    <el-card shadow="never" :body-style="{ padding:'5px'}" class="card-top">
      <img src="@/assets/images/bg.jpg" class="image" alt="头像"/>
      <div class="name_container">
        <div class="myName">MakeShift</div>
        <div class="myLogo">
          <span class="lv"></span>
          <span class="lv1"><i>lv.1</i></span>
        </div>
      </div>
      <div class="el-row">
        <div class="el-col el-col-12">
          <p class="">{{ focusNumber }}</p>
          <p class="">关注</p>
        </div>
        <div class="el-col el-col-12">
          <p class="">{{ fans }}</p>
          <p class="">粉丝</p>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" style="margin: 10px 0" @click="router.push({ name:'MySide'})">资源动态</el-card>
    <el-menu
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-menu-item index="MyVip" @click="router.push({name:'MyVip'})">我的会员</el-menu-item>
      <el-menu-item index="MyCash" @click="router.push({name:'MyCash'})">我的钱包</el-menu-item>
      <el-menu-item index="MyCount" @click="router.push({name:'MyCount'})">我的优惠券</el-menu-item>
      <el-menu-item index="MyOrder" @click="router.push({name:'MyOrder'})">我买的订单</el-menu-item>
      <el-sub-menu index="MySale">
        <template #title>
          <span>我卖的</span>
        </template>
        <el-menu-item @click="router.push({name:'OrderManagement'})" index="OrderManagement">订单管理</el-menu-item>
        <el-menu-item @click="router.push({name:'CommodityManagement'})" index="CommodityManagement">商品管理</el-menu-item>
        <el-menu-item @click="router.push({name:'CustomerManagement'})" index="CustomerManagement">客户管理</el-menu-item>
        <el-menu-item @click="router.push({name:'UnCollected'})" index="UnCollected">待收款</el-menu-item>
        <el-menu-item @click="router.push({name:'PrivilegeManagement'})" index="PrivilegeManagement">优惠管理</el-menu-item>
        <el-menu-item @click="router.push({name:'EvaluationManagement'})" index="EvaluationManagement">评价管理
        </el-menu-item>
        <el-menu-item @click="router.push({name:'Margin'})" index="Margin">保证金</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="6" @click="router.push({name:'MyData'})">我的资料</el-menu-item>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()


const fans = ref(0)
const focusNumber = ref(0)
const temp: any[] = [];

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>


<style lang="less" scoped>
.card-top {
  padding: 21px 0;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-top: 20px;

  .name_container {
    text-align: center;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;

    .myName {
      font-size: 16px;
      color: #111;
      text-align: center;
      padding: 6px 0 6px;
      width: 80px;
      word-break: break-all;
    }

    .myLogo {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: -webkit-gradient(linear, left top, left bottom, from(#ff289b), to(#ff43d0));
      background: linear-gradient(#ff289b, #ff43d0);
      border: 1px solid #fff;
      border-radius: 4px;
      padding: 0 15px;
      display: inline-block !important;
      line-height: 1.15;
      white-space: nowrap;
      cursor: pointer;
    }

    .lv {
      width: 20px;
      height: 10px;
      background-image: url(https://rs.dance365.com/level_Lv.@3x.png)
    }

    .lv1 {
      width: 8px;
      height: 10px;
      display: inline-block;
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }
}

.image {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #eee;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;


}
</style>

